<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础的ajax</title>
</head>
<body>
    <h1>基础的get请求</h1>
    <!-- 语义化，一般都会放在form表单中 -->
    <form id = "form" action="" method="">
        <input id="ipt" type="text">
        <button id="btn">输入学生id 查询详细信息</button>
    </form>
    <script>
        // 获取需要操作的元素
        const oBtn = document.getElementById("btn")
        const oIpt = document.getElementById("ipt")
        const oForm = document.getElementById("form")
        /*
        表单提交事件的绑定方式：
            1.给按钮绑定点击事件
            2.给form元素绑定提交事件submit
            3.一般我们不用form提交，所以需要在事件内阻止默认事件（默认提交后刷新页面）
              -e.preventDefault()
              -return false ????为什么非得加false
        
        */
        // 1.给按钮绑定点击事件
        // oBtn.onclick = function(e){
        //     // 阻止默认提交后刷新页面的行为
        //     e.preventDefault()
        //     console.log(1);
        // }
        // 2.给form元素绑定提交事件submit
        // oForm.onsubmit = function(e){
        //     // 阻止默认提交后刷新页面的行为
        //     // e.preventDefault()
        //     console.log(2);
        //     return false
        // }
        // ajax发送请求，核心是XMLHttpRequest

        oForm.onsubmit = function(){
            const userId = oIpt.value
            console.log(userId);
           //1.实例化XMLHttpRequest
           const xhr = new XMLHttpRequest()

           //2.打开路径：
           //参数1：请求类型 参数2：请求地址 参数3：是否异步
           //"/"表示根目录：所在目录
           //前端请求数据的方式有query和path两种
           //编写地址时不要加空格
           //query方法请求:
           //xhr.open("GET",`/user?userId=${userId}&_=${Date.now()}`,true)
           //path方法请求:
           xhr.open("GET",`/userInfor/${userId}?_=${Date.now()}`,true)

           //3.发送请求
           xhr.send()

           //4.监听事件
           xhr.onreadystatechange = function(){
            /*
             请求状态码 readyState
             0:初始化xhr  1：已经调用open方法 2.已经调用send正在发送请求 3.获取部分数据
             4：已获取所有数据
             响应状态码 status：
             2xxx代表响应成功
            */
            if(xhr.readyState === 4 && xhr.status >= 200 && xhr.status <= 299){
                console.log(xhr.responseText);
            }
        //    console.log(xhr.readyState);
           }
           return false 
        }


    </script>
</body>
</html>